<template>
  <div id="Content">
    <div id="Catalog">
      <table>
        <tr>
          <th style="align-content: center" colspan="2">
            Order #{{order.orderId}}  {{order.orderDate}}
          </th>
        </tr>
        <tr>
          <th colspan="2"><h2>支付细节</h2></th>
        </tr>
        <tr>
          <td>支付方式:</td>
          <td>支付宝</td>
        </tr>
        <tr>
          <td>支付账号:</td>
          <td>hpm***com</td>
        </tr>
        <tr>
          <th colspan="2"><h2>支付方信息</h2></th>
        </tr>
        <tr>
          <td>名:</td>
          <td>{{order.billToFirstName}}</td>
        </tr>
        <tr>
          <td>姓:</td>
          <td>{{order.billToLastName}}</td>
        </tr>
        <tr>
          <td>地址一:</td>
          <td>{{order.billAddress1}}</td>
        </tr>
        <tr>
          <td>地址二:</td>
          <td>{{order.billAddress2}}</td>
        </tr>
        <tr>
          <td>城市:</td>
          <td>{{order.billCity}}</td>
        </tr>
        <tr>
          <td>省份:</td>
          <td>{{order.billState}}</td>
        </tr>
        <tr>
          <td>邮政编码:</td>
          <td>{{order.billZip}}</td>
        </tr>
        <tr>
          <td>国家:</td>
          <td>{{order.billCountry}}</td>
        </tr>
        <tr>
          <th colspan="2"><h2>配送信息</h2></th>
        </tr>
        <tr>
          <td>名:</td>
          <td>{{order.shipToFirstName}}</td>
        </tr>
        <tr>
          <td>姓:</td>
          <td>{{order.shipToLastName}}</td>
        </tr>
        <tr>
          <td>地址一:</td>
          <td>{{order.shipAddress1}}</td>
        </tr>
        <tr>
          <td>地址二:</td>
          <td>{{order.shipAddress2}}</td>
        </tr>
        <tr>
          <td>城市:</td>
          <td>{{order.shipCity}}</td>
        </tr>
        <tr>
          <td>省份:</td>
          <td>{{order.shipState}}</td>
        </tr>
        <tr>
          <td>邮政编码:</td>
          <td>{{order.shipZip}}</td>
        </tr>
        <tr>
          <td>国家:</td>
          <td>{{order.shipCountry}}</td>
        </tr>
        <tr>
          <td>快递公司:</td>
          <td>{{order.courier}}</td>
        </tr>
        <tr>
          <td colspan="2" v-if="order.status = 'P'" style="font-weight: 900 ">已发货</td>
          <td colspan="2" v-else style="font-weight: 900 ">未发货</td>
        </tr>
        <tr>
          <th colspan="2"><h2>商品单</h2></th>
        </tr>
        <tr>
          <td colspan="2">
            <table>
              <tr>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>商品描述</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
              </tr>
              <tr v-for="(lineItem, index) in order.lineItems">
                <td>
                  <a>
                    <router-link :to=" {name:'item',params:{id:lineItem.item.itemId}}">
                    {{lineItem.item.itemId}}
                    </router-link>
                  </a>
                </td>
                <td>{{lineItem.item.product.name}}</td>
                <td>
                  <a v-if="lineItem.item != null">
                    {{lineItem.item.attribute1}},{{lineItem.item.attribute2}},
                    {{lineItem.item.attribute3}},{{lineItem.item.attribute4}},
                    {{lineItem.item.attribute5}}
                  </a>
                  <a v-else>{description unavailable}</a>
                </td>
                <td>{{lineItem.quantity}}</td>
                <td>{{lineItem.unitPrice}}</td>
                <td>{{lineItem.total}}</td>
              </tr>

              <tr>
                <th colspan="5">Total:{{order.totalPrice}}</th>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <th colspan="2">
            <el-button v-if="order.payStatus==='no'" @click="toConfirm()">去支付</el-button>
          </th>
        </tr>
      </table>
    </div>
  </div>

</template>

<script>
export default {
  name: "OrderDetailView"
}
</script>

<script setup>
//初始化—————————————————————————————————————————————————
import {onMounted, reactive} from "vue";
import api from "../../api";
import router from "../../router";

const order_id = sessionStorage.getItem('order_id')
const order = reactive({})

onMounted(() => {
  getData()
})
const getData = () => {
  //初始化页面
  console.log(order_id)
  api.getOrderByOrderId(order_id).then(
      res => {
        // order.splice(0, order.length)//清空旧数据
        // order.push(...res.data.data)//update,from date results
        console.log(res.data.data)
        Object.assign(order, res.data.data)

        sessionStorage.setItem('order',JSON.stringify(res.data.data))
      }
  )
}
const toConfirm = () => {
  //传给订单确认界面
  const confirmForm1 = {
    billToFirstName:order.billToFirstName,
    billToLastName: order.billToLastName,
    billAddress1:   order.billAddress1,
    billAddress2:   order.billAddress2,
    billCity:       order.billCity,
    billState:      order.billState,
    billZip:        order.billZip,
    billCountry:    order.billCountry,

  }
  const confirmForm2 = {
    shipToFirstName:order.shipToFirstName,
    shipToLastName: order.shipToLastName,
    shipAddress1:   order.shipAddress1,
    shipAddress2:    '',
    shipCity:       order.shipCity,
    shipState:      order.shipState,
    shipZip:        order.shipZip,
    shipCountry:    order.shipCountry
  }
  sessionStorage.setItem('confirmForm1',JSON.stringify(confirmForm1) );
  sessionStorage.setItem('confirmForm2',JSON.stringify(confirmForm2) );
  sessionStorage.setItem('total',order.totalPrice);
  console.log(order.totalPrice);

  router.push('/main/ConfirmOrder');
}
</script>

<style scoped>
table {
    text-align: center;
    border-collapse:collapse;
}

td {
    padding: 20px 38px;
}

tr:nth-child(2n-1) td {
    background-color: rgba(222, 222, 222, 0.53);
}

tr:nth-child(2n) td {
    background-color: rgba(222, 222, 222, 0.72);
}
</style>